<template>
  <main>
    <manage-header @search="search"></manage-header>
    <manage-table 
      :tableName="tableName"
      :tableHeader="tableHeader"
      :dataList="blogList"
      :currentPage="blogManageQueryVo.currentPage"
      :pageSize="blogManageQueryVo.pageSize"
      @edit="edit"
      @remove="remove"
    >
    </manage-table>
    <div class="table-page">
      <Page
        :total="totalBlog" 
        :current="blogManageQueryVo.currentPage" 
        :page-size="blogManageQueryVo.pageSize"
        @on-change="changePage" 
        show-elevator 
      />
    </div>
    <Modal v-model="modal" :title="confirmMsg.title" @on-ok="confirm">
      <p>
        {{confirmMsg.pre}}
        <span style="color: #ff9900">{{confirmMsg.name}}</span>
        {{confirmMsg.suf}}
      </p>
    </Modal>
  </main>
</template>

<script>
import { formatDate } from 'utils/utils'
import { findProBlogList, deleteBlog } from 'service'

export default {
  name: 'BlogManage',
  data() {
    return {
      modal: false,
      tableName: 'blog-manage',
      tableHeader: [
        {title: ' ', slot: 'number'},
        {title: '标题', key: 'title'},
        {title: '分类', key: 'type'},
        {title: '推荐', key: 'recommend'},
        {title: '置顶', key: 'top'},
        {title: '状态', key: 'published'},
        {title: '更新时间', key: 'updateTime'},
        {title: '操作', slot: 'action'}
      ],
      blogList: [],
      blogManageQueryVo: {
        currentPage: 1,
        pageSize: 7,
        title: '',
        typeId: Number,
        recommend: Boolean
      },
      blogId: 0,
      totalBlog: 0,
      confirmMsg: {
        title: '删除博客',
        pre: '您正在准备删除博客 ' ,
        name: '',
        suf: ' 确定吗？'
      }
    }
  },
  created() {
    this.getBlogList()
  },
  watch: {
    $route(to, from) {
      if(from.path.indexOf('edit') !== -1 || from.path.indexOf('publish') !== -1) {
        this.getBlogList()
      }
    }
  },
  methods: {
    async getBlogList() {
      let res = await findProBlogList(this.blogManageQueryVo)
      console.log(res)
      this.blogList = res.data.data.list.map(item => {
        let id = item.id;
        let title = item.title;
        let type = item.type ? item.type.name : "无"
        let recommend = item.recommend ? "是" : "否"
        let top = item.top ? "是" : "否"
        let published = item.published? "发布" : "草稿"
        let updateTime = formatDate(new Date(item.updateTime), "yyyy-MM-dd hh:mm:ss")
        return {
          id,
          title,
          type,
          recommend,
          top,
          published,
          updateTime
        }
      })
      this.totalBlog = res.data.data.total
    },
    async changePage(currentPage) {
      this.blogManageQueryVo['currentPage'] = currentPage
      await this.getBlogList()
    },
    edit(id) {
      this.$router.push({
        path: '/profile/blog/edit/' + id
      })
    },
    // 点击删除开启modal
    remove(row) {
      this.blogId = row.id
      this.confirmMsg.name = row.title
      this.modal = true
    },
    // modal确认回调
    async confirm() {
      let res = await deleteBlog(this.blogId)
      if (res.data.flag) {
        this.$Message.success({content: '删除博客成功!'})
        await this.getBlogList()
      } else {
        this.$Message.error({content: res.data.errorMsg})
      }
    },
    async search(queryVo) {
      this.blogManageQueryVo.title = queryVo.title
      this.blogManageQueryVo.typeId = queryVo.typeId
      this.blogManageQueryVo.recommend = queryVo.recommend
      await this.getBlogList()
    }
  },
  components: {
    "manage-header": () => import("./unit/ManageHeader"),
    "manage-table": () => import("./unit/ManageTable")
  }
}
</script>

<style lang="scss" scoped>
main {
  max-width: 1000px;
  .table-page {
    margin-bottom: 2rem;
    text-align: center;
  }
}
</style>